<template>
  <div id="rePwd">
    <p style="color: #8d9192">Tip:可通过注册手机号验证码的方式找回密码,如更换手机号，请联系工作人员</p><br>
    <el-form  label-position="left" label-width="110px" :model="forget" ref="forget" :rules="rules">
      <el-form-item label="账号" prop="userName">
        <el-input placeholder="请输入账号" v-model="forget.userName"></el-input>
      </el-form-item>
      <el-form-item  label="新密码"  prop="newPassword">
        <el-input placeholder="请输入新密码" v-model="forget.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码"  prop="rePassword">
        <el-input placeholder="再次输入密码" v-model="forget.rePassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="请输入手机号"  prop="tel">
        <el-input v-model="forget.tel" name="tel" placeholder="输入手机号" maxlength="11" />
      </el-form-item>
      <el-form-item v-model="forget.captcha" label="短信验证码"  prop="captcha">
        <el-input style="width:25%;" v-model="forget.captcha" name="captcha" placeholder="输入短信验证码" />
        <el-button :disabled="this.showNum" style="height:40px;width:20%;" type="info" plain  @click="send" class="btn_number" v-bind:class="{gray:wait_timer>0}">
          <span class="num_green" v-show="showNum" v-bind:class="{num:wait_timer>0}">{{ this.wait_timer + "s " }}</span>
          <span class="span_number" v-bind:class="{gray_span:wait_timer>0}">{{ getCodeText() }}</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.push('login')" type="danger">返回</el-button>
        <el-button @click="setNewPwd" type="success">提交</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
// import {getForgetCaptcha, reSetPwd} from "@/api/user";

import {reSetPwd, sendCaptcha} from "@/network/companyUser";

export default {
  name: "rePwd",
  data(){
    return{
      allowSend:true,
      time:30,
      timer:'',
      forget:{
        userName:'',
        newPassword:'',
        rePassword:'',
        tel:'',
        captcha:'',
      },
      rules: {
        userName: [{required: true, message: '请输入用户名', trigger: 'change'}],
        newPassword: [{required: true, message: '请输入密码', trigger: 'change'}],
        rePassword: [{required: true, message: '请再次输入密码', trigger: 'change'}],
        tel: [{required: true, message: '请输入手机号', trigger: 'change'}],
        captcha: [{required: true, message: '请输入验证码', trigger: 'change'}]
      },
      wait_timer: false,
      showNum: false,
    }
  },
  methods:{
    setNewPwd(){
      if(this.newPassword===this.rePassword){
        this.$refs.forget.validate(valid=>{
          if(valid){
            reSetPwd(this.forget).then(res=>{
              this.$message.success(res.data.data)
              this.$router.push("/login")
            })
          } else {
            return false;
          }
        });
      }else{
        this.$message.warning("两次输入密码不一样");
      }
    },
    send() {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if(reg.test(this.forget.tel)){
        sendCaptcha(this.forget.tel).then(res=>{
          if(res.data!=null){
            this.$message.success(res.data.data);
          }
        });
        this.showNum = true;
        this.wait_timer = 120;
        var that = this;
        var timer_interval = setInterval(function() {
          if (that.wait_timer > 0) {
            that.wait_timer--;
          } else {
            clearInterval(timer_interval);
          }
        }, 1000);
      }else{
        this.$message.warning("手机号错误");
      }
    },
    getCodeText: function() {
      if (this.wait_timer > 0) {
        return "已发送";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送验证码！";
      }
      if (this.wait_timer === false) {
        return "发送验证码！";
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
#rePwd
  width 60%
  margin 80px auto
  box-shadow 0 0 2px grey
  height 500px
  padding 20px 50px
</style>
